<template>
  <div class="disease-view">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>传染病电子报卡</span>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
      
      <el-form :model="form" label-width="120px" class="disease-form">
        <!-- 患者基本信息 -->
        <el-divider content-position="left">患者基本信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="患者姓名">
              <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="male" />
                <el-option label="女" value="female" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input-number v-model="form.age" :min="0" :max="150" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 传染病信息 -->
        <el-divider content-position="left">传染病信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="疾病类型">
              <el-select v-model="form.diseaseType" placeholder="请选择疾病类型">
                <el-option label="甲类传染病" value="type_a" />
                <el-option label="乙类传染病" value="type_b" />
                <el-option label="丙类传染病" value="type_c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="具体病种">
              <el-select v-model="form.diseaseName" placeholder="请选择具体病种">
                <el-option label="新型冠状病毒肺炎" value="covid19" />
                <el-option label="艾滋病" value="aids" />
                <el-option label="病毒性肝炎" value="hepatitis" />
                <el-option label="肺结核" value="tuberculosis" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发病日期">
              <el-date-picker
                v-model="form.onsetDate"
                type="date"
                placeholder="选择发病日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 诊断信息 -->
        <el-divider content-position="left">诊断信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="初步诊断">
              <el-input
                v-model="form.initialDiagnosis"
                type="textarea"
                :rows="3"
                placeholder="请输入初步诊断"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实验室检查">
              <el-input
                v-model="form.labResults"
                type="textarea"
                :rows="3"
                placeholder="请输入实验室检查结果"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 报告信息 -->
        <el-divider content-position="left">报告信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="报告医生">
              <el-input v-model="form.reportDoctor" placeholder="请输入报告医生姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报告日期">
              <el-date-picker
                v-model="form.reportDate"
                type="date"
                placeholder="选择报告日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报告单位">
              <el-input v-model="form.reportUnit" placeholder="请输入报告单位" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({
  patientName: '',
  gender: '',
  age: 0,
  diseaseType: '',
  diseaseName: '',
  onsetDate: '',
  initialDiagnosis: '',
  labResults: '',
  reportDoctor: '',
  reportDate: '',
  reportUnit: ''
})

const handleSave = () => {
  // TODO: 实现保存功能
  ElMessage.success('保存成功')
}
</script>

<style scoped>
.disease-view {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.disease-form {
  margin-top: 20px;
}

.el-divider {
  margin: 24px 0;
}
</style> 